<template>
	<!-- 顶部 侧边 内容 -->

	<div class="column divheight">
		<adminhead />
		<div class="row">
			<!--左侧  -->
			<left :active="'2'"></left>
			<!-- 内容 -->
			<div style="flex: 1" class="column">
				<el-breadcrumb class="page-header" separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>导航设置</el-breadcrumb-item>
				</el-breadcrumb>
				<div class="column Navigationcolumn" style="flex: 1">
					<el-alert title="不要设置过多导航,前端仅会获取前5个导航设置" center type="warning" :closable="false" />
					<el-card>
						<div> <el-button type="primary" @click=";(dialogtitile = '添加导航'), Edit()">添加导航</el-button></div>
					</el-card>

					<el-card style="flex: 1">
						<div v-loading="loading">
							<el-table border :data="tableData" style="width: 100%" :header-cell-style="{ backgroundColor: '#f5f7fa' }">
								<el-table-column prop="id" label="id" width="100" />
								<el-table-column prop="name.zh" label="名称" width="200" />
								<el-table-column prop="url" label="链接地址" min-width="500" />
								<el-table-column label="分类" width="100">
									<template #default="scope">
										<span>{{ scope.row.type == 'module' ? '模块' : '页面' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="状态" width="70">
									<template #default="scope">
										<el-switch v-model="scope.row.state" @change="handleChange(scope.row)" />
									</template>
								</el-table-column>
								<el-table-column label="时间" width="200" prop="time" />
								<el-table-column label="排序" width="150">
									<template #default="scope">
										<el-input-number v-model="scope.row.sort" size="small" @change="handleChange(scope.row)" />
									</template>
								</el-table-column>
								<el-table-column label="操作" width="100">
									<template #default="scope">
										<el-button link type="danger" size="small" @click="Detail(scope.row)">刪除</el-button>
										<el-button link type="primary" size="small" @click=";(dialogtitile = '修改导航'), Edit(scope.row)">修改</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<el-pagination background @current-change="fun" :hide-on-single-page="true" :current-page="curPage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 添加修改 -->
		<el-dialog v-model="dialogVisible" :title="dialogtitile" width="400" :before-close="handleClose">
			<el-form :model="from" ref="from" class="demo-form-inline" :rules="rules">
				<el-form-item label="中文名称:" prop="name.zh">
					<el-input style="width: 200px" v-model="from.name.zh" placeholder="名称(中文)"></el-input>
				</el-form-item>
				<el-form-item label="英文名称:" prop="name.en">
					<el-input style="width: 200px" v-model="from.name.en" placeholder="名称(英文)"></el-input>
				</el-form-item>
				<el-form-item label="导航类型:" prop="type">
					<el-select v-model="from.type" placeholder="请选择">
						<el-option label="模块" value="module" @click="from.url = ''"> </el-option>
						<!-- 开放其他页面侯再打开 -->
						<!-- <el-option label="页面" value="page" @click="from.url = ''"> </el-option> -->
					</el-select>
				</el-form-item>
				<el-form-item label="导航地址:" prop="url">
					<el-select v-model="from.url" placeholder="请选择">
						<el-option v-if="from.type == 'module'" v-for="(item, index) in module.filter((item) => item.id)" :key="index" :label="item.name" :value="'/?web=' + item.id"> </el-option>
						<el-option v-if="from.type == 'page'" v-for="(item, index) in page" :key="index" :label="item.meta.title" :value="item.path"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否可用:">
					<el-switch v-model="from.state" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" :loading="loading" @click="setdata()">提交 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import { dataRequest as api } from '@/api/api'
	import adminhead from '@/components/adminhead.vue'
	import adminleft from '@/components/adminleft.vue'
	import divright from '@/components/admin/divright.vue'
	// 下面是组件列表

	export default {
		components: {
			adminhead,
			left: adminleft,
		},
		data() {
			return {
				loading: false,
				settype: true,
				dialogtitile: '',
				curPage: 1, //当前页
				pagesize: 11, //每页显示数量
				total: 0, //总共多少条
				domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
				module: [],
				page: [],
				dialogVisible: false,
				tableData: [],
				from: {
					name: { zh: '', en: '' },
					type: 'module',
					url: '',
					state: true,
					sort: '0',
				},
				rules: {
					name: {
						zh: [
							{
								required: true,
								message: '请输入中文名称',
								trigger: 'blur',
							},
						],
						en: [
							{
								required: true,
								message: '请输入英文名称',
								trigger: 'blur',
							},
							{
								pattern: /^[a-zA-Z]+$/,
								message: '只允许输入英文字母',
								trigger: 'blur',
							},
						],
					},
					type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
					url: [{ required: true, message: '请选择链接地址', trigger: 'blur' }],
				},
			}
		},
		methods: {
			async handleChange(ele) {
				try {
					this.from = { ...ele }
					delete this.from.time
					this.from.state = this.from.state ? '1' : '0'
					this.from.sort = String(this.from.sort)
					this.loading = true
					try {
						let arr = await api('Update', 'navigation', this.from)
						if (arr.code == 200) {
							this.$message.success(`修改成功`)
						} else {
							this.$message.error(arr.data)
						}
					} catch (error) {}

					this.getpage()
				} catch (error) {
					console.log(error)
				}

				// 灵活修改
			},
			async Detail(ele) {
				try {
					this.loading = true
					let arr = await api('Delete', 'navigation', { id: ele.id })
					if (arr.code == 200) {
						this.$message.success(`删除成功`)
					} else {
						this.$message.error(arr.data)
					}
				} catch (error) {}

				this.getpage()
			},
			Edit(ele = '') {
				try {
					if (ele) {
						// 修改
						this.from = { ...ele }
						delete this.from.time
					} else {
						// 添加
						this.from = {
							name: { zh: '', en: '' },
							type: 'module',
							url: '',
							state: true,
							sort: '0',
						}
					}
					this.dialogVisible = true
				} catch (error) {}
			},
			// 分页
			fun(page) {
				this.curPage = page
				this.getpage()
			},
			async getpage() {
				// 获取导航
				this.loading = true
				try {
					let array = await api('Query', 'navigation', { perPage: this.pagesize, page: this.curPage, offset: 'ASC' })

					if (array.code == 200) {
						for (let index = 0; index < array.data.data.length; index++) {
							array.data.data[index].sort = array.data.data[index].sort / 1
							array.data.data[index].state = array.data.data[index].state == '1' ? true : false
						}
						this.tableData = array.data.data
						this.total = array.data.count / 1
					}
					let arr = await api('Query', 'parameters', { domain: this.domain, page: 'index' })
					if (arr.code == 200) {
						this.module = arr.data.Configuration
					}
					const allRoutes = this.$router.options.routes

					// 定义要排除的多个路径
					const excludedPaths = ['/admin', '/install', '/settings']

					// 过滤特定路径下的路由
					const filteredRoutes = allRoutes.filter((route) => {
						// 检查路由路径不以排除列表中任何一个路径开头
						return !excludedPaths.some((excludedPath) => route.path.startsWith(excludedPath))
					})

					this.page = filteredRoutes
				} catch (error) {}

				this.loading = false
			},
			async setdata() {
				this.loading = true
				this.$refs['from'].validate(async (valid) => {
					if (valid) {
						let method = 'Create'
						// 验证通过 进行添加或者修改
						if (this.from.id) {
							// 这是修改
							method = 'Update'
						}
						try {
							let arr = await api(method, 'navigation', this.from)
							if (arr.code == 200) {
								this.$message.success(`${this.dialogtitile}成功`)
							} else {
								this.$message.error(arr.data)
							}
							this.getpage()
							this.loading = false
						} catch (error) {}
					} else {
						this.loading = false
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
		},
		mounted() {
			this.getpage()
		},
	}
</script>

<style scoped>
	.row {
		flex: 1;
	}
	.el-pagination {
		margin-top: 10px;
		justify-content: end;
	}
	.divheight {
		display: flex;
		height: 100%;
		min-width: 1895px !important;
	}
	.page-header {
		padding: 10px;
		background-color: #fff;
	}
	.Navigationcolumn {
		gap: 20px;
		margin: 15px;
	}
	.anniu {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
